import { Image } from 'antd';
import { useRef } from 'react';

import QuestionTip from '@/components/tooltip/QuestionTip';
import { t } from '@/locales/i18n';

enum FnTypeEnum {
  inputGuide = 'inputGuide',
  nextQuestion = 'nextQuestion',
  tts = 'tts',
  variable = 'variable',
  welcome = 'welcome',
  file = 'file',
  visionModel = 'visionModel',
  instruction = 'instruction',
}

const ChatFunctionTip = ({ type }: { type: `${FnTypeEnum}` }) => {
  const map = useRef({
    [FnTypeEnum.inputGuide]: {
      icon: '/imgs/app/inputGuide-icon.svg',
      title: t('input_guide'),
      desc: t('input_guide_tip'),
      imgUrl: '/imgs/app/inputGuide.svg',
    },
    [FnTypeEnum.nextQuestion]: {
      icon: '/imgs/app/nextQuestion-icon.svg',
      title: t('core.app.Question Guide'),
      desc: t('core.app.Question Guide Tip'),
      imgUrl: '/imgs/app/nextQuestion.svg',
    },
    [FnTypeEnum.tts]: {
      icon: '/imgs/app/tts-icon.svg',
      title: t('core.app.TTS'),
      desc: t('core.app.TTS Tip'),
      imgUrl: '/imgs/app/tts.svg',
    },
    [FnTypeEnum.variable]: {
      icon: '/imgs/app/variable-icon.svg',
      title: t('core.module.Variable'),
      desc: t('core.app.tip.variableTip'),
      imgUrl: '/imgs/app/variable.svg',
    },
    [FnTypeEnum.welcome]: {
      icon: '/imgs/app/welcome-icon.svg',
      title: t('core.app.Welcome Text'),
      desc: t('core.app.tip.welcomeTextTip'),
      imgUrl: '/imgs/app/welcome.svg',
    },
    [FnTypeEnum.file]: {
      icon: '/imgs/app/fileinput.svg',
      title: t('file_upload'),
      desc: t('file_upload_tip'),
      imgUrl: '/imgs/app/fileUploadPlaceholder.png',
    },
    [FnTypeEnum.visionModel]: {
      icon: '/imgs/app/question.svg',
      title: t('vision_model_title'),
      desc: t('llm_use_vision_tip'),
      imgUrl: '/imgs/app/visionModel.png',
    },
    [FnTypeEnum.instruction]: {
      icon: '/imgs/app/help.svg',
      title: t('plugin.Instructions'),
      desc: t('plugin.Instruction_Tip'),
      imgUrl: '/imgs/app/instruction.svg',
    },
  });
  const data = map.current[type];

  return (
    <QuestionTip
      icon=""
      // maxW={'420px'}
      // ml={1}
      title={
        <div className="pt-2">
          <div className="flex items-start">
            <Image src={data.icon} width="36px" alt="" />
            <div className="ml-3">
              <div className="font-bold">{data.title}</div>
              <div className="text-xs text-gray-500">{data.desc}</div>
            </div>
          </div>
          <Image
            src={data.imgUrl}
            style={{
              width: '100%',
              minHeight: '250px',
              marginTop: '8px',
              objectFit: 'contain',
            }}
            alt=""
          />
        </div>
      }
    />
  );
};

export default ChatFunctionTip;
